<template>
    <div>
      <div class="main">
        <el-card class="box-card">
          <input type="text" class="nav-input">
           <button class="nav-button">搜索</button>
        </el-card>


      <el-card class="bot-card">
        <div>
          <h1>{{i+1}}、{{kdata}}</h1>
          <audio :src="data" controls="controls"  >Hello</audio>
          <button @click="test1">上一首</button>
          <button @click="test">下一首</button>
          <button @click="kkk">测试</button>
        </div>
      </el-card>


      <!-- <el-card>
       <div>
          <audio :src=list[0] ref="audio1">Hello</audio>
          <img class="music-play" src="http://cdn.k1998.xyz/play.png" ref="img1" alt="" @click="play">
          <el-progress :text-inside="true" :percentage="100" :stroke-width="18" status="success" ></el-progress>
        </div>
      </el-card> -->



     </div>


    </div>

    
</template>

<script>
export default {
   data(){
    return{
       queryInfo: {
          pagenum:1,
          pagesize:11
      },
        list:[],
        title:[],
        data:"http://cdn.k1998.xyz/shape%20of%20you.mp3",
        kdata:"shape of you",
        i:0
  }
},
   methods:{
      play(){
        console.log(this.$refs.img1.src);
        if( this.$refs.img1.src === "http://cdn.k1998.xyz/pruse.png"){
                this.$refs.img1.src = "http://cdn.k1998.xyz/play.png"
                 this.$refs.audio1.pause();
        }else{
                this.$refs.img1.src = "http://cdn.k1998.xyz/pruse.png"
                 this.$refs.audio1.play();
        }
       
        
      },
      async getList(){
        const {data:res} = await this.$http.get('music/lists');
        console.log(res.data);
        this.list = res.data;
      },
      test(){
        if(this.i>=this.list.length-1){
          this.i = -1
        }
       this.i++;
       this.data = this.list[this.i].src;
       this.kdata = this.list[this.i].name;
       
      },
      test1(){
         if(this.i<=0){
          this.i = this.list.length
        }
       this.i--;
      this.data = this.list[this.i].src;
       this.kdata = this.list[this.i].name;
      },
      kkk(){
        console.log(this.$refs.audio1.currentTime);
        
      }
},
mounted(){
  this.getList();
}


  

}
</script>

<style scoped>
.main{
  width: 500px;
  margin: 0 auto;
}

.box-card{
  margin-bottom: 20px;
}

.bot-card{
  margin-bottom: 10px;
}

.nav-input{
  width: 70%;
  height: 20px;
  margin: auto auto;
  border-radius: 10px;

}

.nav-button{
  margin-left: 15px;
  border-radius: 5px;
  background: skyblue;
}

.music-play{
  width: 45px;
}



</style>